<template>
	<view class="gui-list-items" >
		<text :class="['gui-list-icon', 'gui-icons', iconClass]">{{ icon }}</text>
		<view class="gui-list-body gui-border-b">
			<view class="gui-list-title">
				<text class="gui-list-title-text gui-primary-text">{{displayedTitle}}</text>
				<text v-if="valueShow=='1'" class="gui-list-title-desc gui-color-gray">{{displayedValue}}</text>
			</view>
			<text v-if="desShow=='1'"
			class="gui-list-body-desc gui-color-gray">{{description}}</text>
		</view>
		<text v-if="arrowShow=='1'"
		class="gui-list-arrow-right gui-icons gui-color-gray-light">&#xe601;</text>
	</view>
</template>

<script setup>
	import { defineProps,computed } from 'vue';
	const props  = defineProps({
		icon: {type: String, default: ''},
		title: {type: String, default: ''},
		value: {type: String, default: ''},
		valueShow: {type: String, default: '1'},
		arrowShow: {type: String, default: '0'},
		desShow: {type: String, default: '0'},
		description: {type: String, default: ''},
		iconClass: { type: String, default: 'gui-color-green' }
	});
	// 计算属性
	const displayedTitle = computed(() => {
	  return props.title === "null" ? '' : props.title;
	});
	
	const displayedValue = computed(() => {
	  return props.value === "null" ? '' : props.value;
	});
</script>

<style>

</style>
